<template>
  <div class="head-title" ref="video">
    <van-nav-bar left-text="返回" :title="title" fixed left-arrow @click-left="onClickLeft" />

    <div v-show="this.url != null">
      <video :src="this.url" :width="widths" height="200" controls="controls" autoplay="autoplay"></video>
    </div>

    <van-row class="ShowVideo">
      <van-col span="16">
        <span class="textR">{{ VideoTitle + '__' + fileName }}</span>
      </van-col>
      <van-col span="4" offset="4">
        <van-button plain type="primary" size="mini" @click="showPopup()">简介</van-button>
      </van-col>
    </van-row>

    <van-row class="ShowVideo">
      <van-col span="24">
        <span
          class="textR"
        >{{ '作者:' + antor + "|" + '视频长度:' + videoLength + "|" + '更新时间:' + updateTime }}</span>
      </van-col>
    </van-row>

    <van-row class="ShowVideo">
      <van-col span="4" offset="6">
        <van-button
          :disabled="disabledBnt"
          type="info"
          size="mini"
          class="savebtn"
          @click="DownVideo()"
        >下载</van-button>
      </van-col>
      <van-col span="4">
        <van-button
          :disabled="disabledBnt"
          type="primary"
          size="mini"
          @click="SaveUserFavorite()"
          class="savebtn"
        >收藏</van-button>
      </van-col>
      <van-col span="4">
        <van-button type="warning" size="mini" @click="showShare = true" class="savebtn">分享</van-button>
      </van-col>
    </van-row>

    <van-popup v-model="show" position="bottom" :style="{height:'70%'}">
      <div class="NoteD">
        <span class="textNote" v-html="note">
          <!-- {{note}} -->
          </span>
      </div>
    </van-popup>

    <van-row class="Videolist">
      <van-tag type="success" class="videoArry">全{{this.videoArry.length}}集</van-tag>
      <van-col span="24">
        <div class="ShowVideo">
          <div
            class="video"
            v-for="(item,index) in this.videoArry"
            :key="index"
            @click="video(index)"
          >
            <span>{{item.episodes}}</span>
          </div>
        </div>
      </van-col>
    </van-row>

    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">评论</van-divider>

    <van-cell-group class="message">
      <div v-for="(item,index) in this.messageList" :key="index" class="content">
        <van-row>
          <van-col span="4" class="name">
            <span>
              <img :src="item.head_image" class="commitImage" />
            </span>
          </van-col>
          <van-col span="18" offset="2" class="conmit">
            <van-row>
              <van-col span="12">
                <span class="autr">{{item.createUserName}}</span>
              </van-col>
              <van-col span="2" offset="7">
                <span class="LinkNum">{{item.likeCount}}</span>
              </van-col>
              <van-col span="3">
                <span class="autrLiNK" @click="AddLike(index,item)">点赞</span>
              </van-col>
            </van-row>

            <span class="conmitNote">{{item.content}}</span>

            <van-row class="resActive">
              <van-col span="12">
                <span class="restime">{{item.Time}}</span>
              </van-col>
              <van-col span="6">
                <span class="reqsDis" @click="reqsDis(index)">{{item.answerCount}}回复</span>
              </van-col>
              <van-col span="6">
                <span
                  class="resCommit resCommitDel"
                  v-show=" item.createUserID  == item.UserId "
                  @click="DeleteDiscuss(index)"
                >x</span>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </van-cell-group>

    <!-- 输入评论 -->
    <van-cell-group class="comment">
      <van-field
        v-model="content"
        rows="1"
        @focus="ss()"
        autosize
        label="留言"
        type="textarea"
        placeholder="请输入留言"
      >
        <template #button>
          <van-button size="small" type="primary" @click="AddDiscuss()">保存</van-button>
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>
import { Toast } from "vant";
import { ShareSheet } from "vant";

export default {
  data() {
    return {
      widths: "", //视频的宽度
      url: "", //视频的路径
      title: "", //页面标题
      VideoTitle: "", //视频标题
      categoryTitle: "", //分类标题
      antor: "", //作者
      videoLength: "", //视频长度
      updateTime: "", //更新时间
      note: "",
      videoArry: [],
      show: false,
      Icon_logo_url: "",
      Icon_wx: require("@/assets/Image/wx.jpg"),
      Icon_zfb: require("@/assets/Image/zfb.jpg"),
      showShare: false,
      message: "", //留言
      options: [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "weibo" }
      ],
      commitImage: require("@/assets/Image/Comit_icon.png"),
      Icon_down: require("@/assets/Image/down.png"),
      Icon_flown: require("@/assets/Image/follow.png"),
      Icon_like: require("@/assets/Image/like.png"),
      content: null, //评论
      messageList: [], //评论列表
      MessL: [],
      Userid: "", //
      FileId: "",
      LinkNum: 0,
      disabledBnt: true,
      fileName: ""
    };
  },

  methods: {

    //wx分享
    wxShare(index) {
      let msg = {};
      (msg.type = "mobile"), //这个要加，至于为什么咱也不敢问
        (msg.title = "fuyinyinshi");
      (msg.content = this.VideoTitle),
        (msg.thumbs = this.Icon_logo_url), //打包进app的本地applogo
        (msg.href = window.location.href);
      //好友点进去需要跳转的连接
      if (option.name == "微信") {
        msg.extra = { scene: "WXSceneSession" }; //好友分享
      } else if (option.name == "朋友圈") {
        msg.extra = { scene: "WXSceneTimeline" }; //朋友圈分享
      }

      plus.share.getServices(function(e) {
        //移动端获取服务，这里的plus方法只能在移动端有效，在pc端运行会报plus错误，下一步就该打包检验
        this.shareData = e; //这个回调函数的参数 e 就包含了所有对象的数组
        for (var i in e) {
          if ("weixin" == e[i].id) {
            this.sharewx = e[i];
          }
        }
      });

      // 使用send发起分享
      this.sharewx.send(
        msg,
        function() {
          Toast("分享成功"); //这里有个问题就是这个方法是异步的，一旦app内需要在分享成功或失败后发起请求的话需要解决异步问题
        },
        function(error) {
          Toast("分享失败");
        }
      );
    },

    /*
    选中
    */

    onSelect(option) {
      console.log(option.name);
      Toast(option.name);

      this.showShare = false;

      let msg = {};
      msg.type = "mobile", //这个要加，至于为什么咱也不敢问
      msg.title = "fuyinyinshi";
      msg.content = this.VideoTitle,
      msg.thumbs = this.Icon_logo_url, //打包进app的本地applogo
      msg.href = window.location.href;
      //好友点进去需要跳转的连接
      if (option.name == "微信") {
        msg.extra = { scene: "WXSceneSession" }; //好友分享
      } else if (option.name == "朋友圈") {
        msg.extra = { scene: "WXSceneTimeline" }; //朋友圈分享
      }

      plus.share.getServices(function(e) {
        //移动端获取服务，这里的plus方法只能在移动端有效，在pc端运行会报plus错误，下一步就该打包检验
        this.shareData = e; 
        //这个回调函数的参数 e 就包含了所有对象的数组
        for (var i in e) {
          if ("weixin" == e[i].id) {
            this.sharewx = e[i];
          }
        }
      });

      // 使用send发起分享
      this.sharewx.send(msg,
        function() {
          Toast("分享成功"); //这里有个问题就是这个方法是异步的，一旦app内需要在分享成功或失败后发起请求的话需要解决异步问题
        },
        function(error) {
          Toast("分享失败");
        }
      );
    },

    /*
    显示
    */

    showPopup() {
      this.show = true;
    },

    /*
    页面跳转
    */

    video(index) {
      console.log("iii");
      this.url = this.videoArry[index].url;
      this.fileName = this.videoArry[index].fileName;

      //添加播放记录
      this.AddPlayRecord(index);
      //点击video以后激活收藏按钮
      this.disabledBnt = false;
      //记录被播放的数据
      sessionStorage.setItem("video", JSON.stringify(this.videoArry[index]));
      /*
       1.0 播放的时候将点击的this.videoArry[index]中所有值存入session中
       2.0 收藏btn默认不可点击。在播放视频以后，修改为可以点击，
       3.0 点击收藏接口的时候获取存储在session中his.videoArry[index]，获取必传值
       4.0 收藏接口请求成功以后，设置收藏btn不可点击
      */
    },

    /*
    获取详情数据
    */

    GetFileDetail() {
      let Id = this.$route.query.ID;
      this.categoryTitle = this.$route.query.categoryTitle;
      console.log(Id);
      this.$axios({
        method: "get",
        url: "/api/User/GetFileDetail",
        params: {
          fileid: Id
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            // console.log(res.data.data);
            (this.VideoTitle = res.data.data.title),
              (this.antor = res.data.data.antor),
              (this.videoLength = res.data.data.videoLength),
              (this.updateTime = new Date(
                res.data.data.updateTime
              ).toLocaleDateString()),
              // console.log(this.updateTime);
              (this.note = res.data.data.note);
            this.Icon_logo_url = res.data.data.playbill_url;

            if (res.data.data.items.length > 0) {
              this.videoArry = res.data.data.items;
              //默认获取第一个视频
              this.url = this.videoArry[0].url;
            } else {
              const ItemVideo = {
                episodes: 1,
                url: res.data.data.url,
                id: res.data.data.id,
                title: res.data.data.title
              };
              this.videoArry.push(ItemVideo);
              //默认获取第一个视频
              this.url = this.videoArry[0].url;
            }
            console.log(this.videoArry);
          }

          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /*
    返回数据
    */

    onClickLeft() {
      const From = this.$route.query.From;
      const id = this.$route.query.id;
      const ID = this.$route.query.ID;
      const Lote = this.$route.query.Lote;

      if (id != null || ID != null || Lote != null) {
        this.$router.push({
          path: "/overWorkList",
          query: {
            id: this.$route.query.id,
            Lote: this.$route.query.Lote
          }
        });
      }; 
      if(From == 'Home') {
        this.$router.push("./Home");
      }
    },

    /*
    视频
    */

    goVideo() {
      this.$router.push("./overWork");
    },

    /*
    /增加评论
    */

    AddDiscuss() {
      console.log(this.content);
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));
      //为空下登陆
      if (!PWD) {
        Toast("请先登录");
        //this.$router.push
        this.$router.push({
          path: "/login"
        });
        return false;
      }

      let FileID = this.$route.query.ID;

      this.$axios({
        method: "post",
        url: "/api/User/AddDiscuss",
        headers: { sessionKey: PWD.sessionKey, authorization: PWD.token },
        data: {
          fileID: parseInt(FileID), //文件ID
          to_UserID: null, //对谁说
          to_DiscussID: null, //对某个评论ID进行回复
          content: this.content //内容
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            console.log(res.data.data);
            this.content = null;
            //输出所有值
            this.GetDiscussList();
          }
          if (res.data.code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /*
    回复单一数据
    */

    reqsDis(index) {
      sessionStorage.setItem(
        "reqsDis",
        JSON.stringify(this.messageList[index])
      );
      //判断为0的时候不可跳转
      //不为0则跳转到回复详页
      if (this.messageList[index].answerCount == 0) {
        return false;
      } else {
        this.$router.push({
          path: "/reqsDis",
          query: {
            ID: this.$route.query.ID,
            reqID: this.messageList[index].id,
            id: this.$route.query.id
          }
        });
      }
    },

    /*
    删除评论
    */

    DeleteDiscuss(index) {
      console.log(this.messageList[index].id);
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));

      this.$axios({
        method: "post",
        url: "/api/User/DeleteDiscuss",
        headers: { sessionKey: PWD.sessionKey, authorization: PWD.token },
        data: {
          id: this.messageList[index].id
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            console.log(res.data.data);
            this.$toast({
              duration: 800,
              message: "删除评论成功"
            });
            //删除成功以后再获取一下数据11111
            this.GetDiscussList();
          }
          if (res.data.code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /*
    /添加播放记录
    */

    AddPlayRecord(index) {
      console.log(this.videoArry);
      console.log(this.videoArry[index].id);
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));
      this.$axios({
        method: "post",
        url: "/api/User/AddPlayRecord",
        headers: { sessionKey: PWD.sessionKey, authorization: PWD.token },
        data: {
          userID: PWD.id, //用户ID
          fileID: this.videoArry[index].id //文件ID
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            console.log(res.data.data);
          }
          if (res.data.code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /*
    //点赞
    */

    AddLike(index, item) {
      console.log(item);
      console.log(this.messageList[index].likeCount);

      const d = 1;
      const Id = this.$route.query.ID;
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));
      this.$axios({
        method: "post",
        url: "/api/User/AddLike",
        headers: { sessionKey: PWD.sessionKey, authorization: PWD.token },
        data: {
          fileID: parseInt(Id), //文件ID
          discussID: this.messageList[index].id //评论ID
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            console.log("点赞成功");
            this.messageList[index].likeCount =
              this.messageList[index].likeCount + 1;
            return false;
          }
          if (res.data.code === 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /*
    //保存或添加收藏
    */

    SaveUserFavorite() {
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));
      const video = JSON.parse(sessionStorage.getItem("video"));

      this.$axios({
        method: "post",
        url: "/api/User/SaveUserFavorite",
        headers: { sessionKey: PWD.sessionKey, authorization: PWD.token },
        data: {
          //id > 0 是修改 收藏。 =0 是新增收藏folderid=0
          id: video.id, //收藏ID
          folderID: 0, //文件夹ID
          fileTitle: video.title, //文件标题
          fileUrl: video.url //播放文件URL
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            console.log(res.data.data);
            this.disabledBnt = true;
          }
          if (res.data.code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    /*
    下载视频
    */

    DownVideo() {
      const video = JSON.parse(sessionStorage.getItem("video"));
      window.location.href = video.url;
    },

    /*
    /获取某个某个文件下【的某个评论】的所有回复（discussId > 0 为评论下的所有回复）
    */

    GetDiscussList() {
      //获取id
      let Id = this.$route.query.ID;
      const PWD = JSON.parse(sessionStorage.getItem("PWD"));
      this.$axios({
        method: "post",
        url: "/api/User/QueryPageListDiscussList",
        // headers: {sessionKey:PWD.sessionKey,authorization:PWD.token},
        data: {
          //  fileID: Id, //文件ID
          fileID: parseInt(Id), //文件ID
          discussID: 0, //评论ID
          pageIndex: 1, //获取或设置 当前页码。
          pageSize: 50, //获取或设置 每页显示数据量。
          recordCount: 0 //获取或设置 所有符合查询条件的总数据量。
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            for (let i = 0; i < res.data.data.resultList.length; i++) {
              //  res.data.data.resultList[i].Time = new Date(res.data.data.resultList[i].lastAnswerTime).toLocaleDateString();
              res.data.data.resultList[i].Time =
                res.data.data.resultList[i].lastAnswerTime;
              //  res.data.data.resultList[i].Num =  res.data.data.resultList[i].likeCount;
              if (PWD) {
                res.data.data.resultList[i].UserId = JSON.parse(
                  sessionStorage.getItem("PWD")
                ).id;
              }
              this.messageList = res.data.data.resultList;
              console.log(this.messageList);
            }
          }
          if (res.data.code === 0 && res.data.data.resultList.length === 0) {
            this.messageList = res.data.data.resultList;
            console.log(this.messageList);
          }
          if (res.data.code === 1) {
            this.$toast({
              duration: 800,
              message: res.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

  // watch:{
  //   videoArry(){
  //     // console.log(this.videoArry);
  //     if(this.videoArry.length != 0){
  //       console.log('ss');
  //       this.video[1];
  //     }
  //   }
  // },

  // watch(videoArry){
  //    if(this.videoArry != 0){
  //        this.video[0];
  //    }
  // },

  /* 
  页面初始化钩子函数//初始化组件 
  created
  */

  created() {
    //获取详情数据
    this.GetFileDetail();
    
    this.$emit("header", false);
    this.$emit("footer", false);
    this.title = this.$route.query.title;
    //获取该文件下所有评论
    this.GetDiscussList();
    //

    
    
  },

  //页面初始化钩子函数 mounted
  mounted() {
    const ss = {
      id: this.$route.query.id,
      ID: this.$route.query.ID
    };
    sessionStorage.setItem("Key", JSON.stringify(ss));
    this.Userid = JSON.parse(sessionStorage.getItem("PWD"));
    // console.log(this.Userid );
    console.log(this.$refs.video.offsetWidth);
    this.widths = this.$refs.video.offsetWidth;

    // this.url =  this.video[0].url
    
  },
  // update(){
  //   //默认加载第一集
  //   this.video[0];
  //   console.log('ss'); 
  // }
};
</script>

<style lang="less" scoped>
.vant {
  height: 20px;
  width: 20px;
}

.gorouterBtn {
  letter-spacing: 10px;
  font-size: 14px;
}

.van-row {
  line-height: 35px;
}
.Nodata {
  text-align: center;
  margin-top: 150px;
}
.iconlogo {
  width: 100%;
}
.textR {
  font-size: 12px;
  display: block;
  padding-left: 20px;
}
.videoBtn {
  margin-top: 80px;
  margin-left: 80px;
}
.NoteD {
  background-color: #fff;
  margin-top: 10px;
}
.NoteD > span {
  display: block;
  font-size: 12px;
  margin-left: 10px;
  margin-right: 10px;
  //  line-height: 10px;;
  line-height: 30px;
}
.ShowVideo {
  background-color: #fff;
  span {
    border-bottom: 1px solid #eee;
    // text-align: center;
  }
}
.textNote {
  line-height: 30px;
}
.textNoHeader {
  background-color: #21a675;
  padding: 0;
  margin: 0;
  padding-left: 10px;
  color: #fff;
}

///

.video {
  width: 40px;
  height: 40px;
  background-color: #99cc99;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  margin: 5px;
  color: #fff;
  font-size: 12px;
  // overflow: scroll;
}
// .VideoShow{
//    overflow: scroll;
// }
.Videolist {
  // padding-left: 10px;
  margin-top: 10px;
  .ShowVideo {
    padding-left: 10px;
  }
}
.videoArry {
  float: right;
}

.lineText {
  height: 36px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  // margin-top: 10px;
  // margin-bottom: 10px;
}

.lineText span {
  line-height: 30px;
  font-size: 14px;
  // background-color: #fff;
}

.lineText_Right {
  // float:right;
  text-align: end;
  padding-right: 20px;
  font-size: 12px;
  color: cadetblue;
  margin-top: 5px;
}
.lineText01 {
  background-color: #fff;
  margin-top: 10px;
  .lineText_left {
    padding-left: 10px;
    .TextL {
      font-size: 12px;
      // line-height: 12px;
    }
  }
}

.nav_item {
  background: #fff;
  width: 100%;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.iconame {
  // top: -10px;
  z-index: 9999;
  position: relative;
  // background-color: #000;
  height: 20px;
  display: block;
  font-size: 12px;
  line-height: 20px;
  // font-family: "Courier New", Courier, monospace;
  color: #000;
  text-align: left;
  padding-left: 10px;
  margin-bottom: 5px;
  // opacity: 0.5;
}
//
.Icon_Fengxian {
  width: 200px;
}
//
.iconlogo {
  height: 150px;
}
//评论
.comment {
  position: fixed;
  left: auto;
  right: auto;
  bottom: 0;
  width: 100%;
  z-index: 2000;
}
.message {
  margin-top: 10px;
  margin-bottom: 60px;
  .name {
    // background-color: red;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 15px;
    .commitImage {
      width: 35px;
      height: 35px;
      margin-top: 10px;
      border-radius: 50%;
      border: 1px solid #eeeeee;
      background-color: #ffcc99;
      // margin: 10px;
    }
  }
  .conmit {
    // background-color: blue;
    margin-left: 20px;
    border-radius: 5px;
    span {
      display: block;
      font-size: 12px;
      line-height: 20px;
    }
    .autr {
      color: #99ccff;
      padding-top: 10px;
    }
    .autrLiNK {
      text-align: end;
      padding-right: 10px;
      color: #99ccff;
      padding-top: 10px;
    }
    .LinkNum {
      text-align: center;
      margin-right: 10px;
      color: #ffffff;
      margin-top: 10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ff9966;
    }
    .resCommit {
      float: right;
      // margin-right: 10px;
    }
    .resCommitDel {
      margin-left: 20px;
    }
  }
}
.Icon {
  width: 25px;
}
.savebtn {
  margin-bottom: 10px;
}

.content {
  border-bottom: 1px solid #eee;

  .conmitNote {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .resActive {
    margin-bottom: 5px;
    line-height: 15px;
    .reqsDis {
      background-color: #eee;
      font-size: 10px;
      padding: 2px 10px;
      border-radius: 10px;
      margin-top: 5px;
      // width: 30px;
      text-align: center;
    }
    .restime {
      margin-top: 10px;
      font-size: 10px;
    }
    .resCommitDel {
      font-size: 14px;
      margin-top: 5px;
      padding: 1px 12px;
      border: 1px solid #eee;
      border-radius: 10px;
    }
  }
}
</style>

